<template>
  <div class="chart-content">
    <div class="chart-content-total-data" :style="{...magnifyFontSizeObj}">
      <span style="color: #08DBF2">累计：{{ lineBarData.sum }}亿元</span>
      <span style="color: #FADA4C">同比：{{ lineBarData.tb }}%</span>
    </div>
    <div ref="echartDom" v-bind="$attrs"></div>
  </div>
</template>

<script setup>
import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose} from 'vue'
import {pxToRem} from "@/utils/index";

const props = defineProps({
  lineBarData: {
    type: Object,
    default: () => {
    }
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});

const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject('echarts');

const magnifyFontSizeObj = ref({
  '--custom-font-size-15': pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 15 : 20) + 'px',
  '--custom-absolute-top-5': pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 5 : 0) + '%',
})

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    let option = {
      tooltip: {
        trigger: 'axis',
        formatter: (val) => {
          const tempArr = val?.filter(x => x.value || x.value == 0)
          return (
            `${tempArr[0].name}` + '<br>' +
            `${tempArr[0].seriesName}： ${tempArr[0].value}${props?.lineBarData?.yAxisLeftLabel}` + '<br>' +
            `${tempArr[1].seriesName}： ${tempArr[1].value}%`
          )
        }
      },
      barMaxWidth: pxToRem(11 * props?.dialogData?.fontSizeTimes),
      grid: {
        left: `${props?.dialogData?.fontSizeTimes === 1 ? 2 : 5}%`,
        right: `${props?.dialogData?.fontSizeTimes === 1 ? 3 : 5}%`,
        bottom: `${props?.dialogData?.fontSizeTimes === 1 ? 3 : 0}%`,
        top: `${props?.dialogData?.fontSizeTimes === 1 ? 25 : 15}%`,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: props?.lineBarData?.xAxisData,
        axisLabel: {
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
          color: 'white',
          fontWeight: 'lighter',
        },
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        axisLine: {
          show: false, // 不显示坐标轴线
        },
        splitLine: {
          show: false // 不显示网格线
        },
      },
      yAxis: [
        {
          name: `单位：${props?.lineBarData?.yAxisLeftLabel}`,
          nameGap: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 15 : 25),
          min: 0,
          max: (value) => value.max || 1000,
          nameTextStyle: {
            color: 'white',
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            padding: [0, 0, 0, pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 50 : 15)]
          },
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          splitLine: {
            show: false // 不显示网格线
          },
          axisLabel: {
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            color: 'white'
          }
        },
        {
          name: '单位：百分比',
          nameGap: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 15 : 25),
          max: (value) => value.max || 100,
          nameTextStyle: {
            color: 'white',
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            padding: [0, 0, 0, pxToRem(props?.dialogData?.fontSizeTimes === 1 ? -50 : 15)]
          },
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          splitLine: {
            show: false // 不显示网格线
          },
          axisLabel: {
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            color: 'white',
            formatter: '{value}%'
          },
          offset: pxToRem(10 * props?.dialogData?.fontSizeTimes)
        }
      ],
      series: [
        {
          data: props?.lineBarData?.barData,
          type: 'bar',
          stack: props?.lineBarData?.seriesName,
          name: props?.lineBarData?.seriesName,
          itemStyle: {
            color: '#2bd6d8'
          },
          yAxisIndex: 0,
        },
        {
          data: props?.lineBarData?.lineData,
          type: 'line',
          stack: '同比增长率',
          name: '同比增长率',
          showSymbol: false,
          itemStyle: {
            color: '#7f7ffd'
          },
          yAxisIndex: 1,
        }
      ]
    }
    option && myChart.value.setOption(option, true);
  }
}

const changeFontSize = () => { // 动态改变字体大小方法
  magnifyFontSizeObj.value = {
    '--custom-font-size-15': pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 15 : 20) + 'px',
    '--custom-absolute-top-5': pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 5 : 0) + '%',
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  initEchart();
};

defineExpose({
  updateChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h280 {
  height: 280px;
}

.dialog-h280 {
  width: 1120px;
  height: 500px;
}

.chart-content {
  position: relative;

  &-total-data {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--custom-font-size-15);
    top: var(--custom-absolute-top-5);
    left: 50%;
    transform: translate(-50%);

    span {
      color: white;
      font-size: 15px;
    }

    span:first-child {
      margin-right: 30px;
    }
  }
}
</style>